interface ImageSize {
    width: number,
    height: number,
}
interface DrawSize extends ImageSize {
    x: number,
    y: number
}

function isPC(): boolean { //是否为PC端
    let userAgentInfo: string = navigator.userAgent;
    let Agents: string[] = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let flag: boolean = true;
    for (var v: number = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

const throllte = (fn: any,n:number) => {
    let timer: number | null = null
    let context = this
    let isLock: boolean = false
    return (...argument: []) => {
        if (!isLock) {
            isLock = true
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(context, argument)
                isLock = false
                // console.log('throllte')
            }, n);
        }
    }
}

class Demo {
    count: number = 143;
    imgArr: Array<HTMLImageElement | any> = []
    canvas: HTMLCanvasElement | null
    ctx: CanvasRenderingContext2D | null | undefined
    width: number
    height: number
    curr: number
    imageIndex: number
    prevY: number = 0
    clientHeight: number = 13000
    box: HTMLDivElement | null
    lis: NodeListOf<Element>
    imageSize: ImageSize
    isPC: boolean
    drawSize: DrawSize
    a:number=1
    constructor() {
        this.isPC = isPC();
        this.width = window.innerWidth
        this.height = window.innerHeight
        this.canvas = document.querySelector("#myCanvas")
        this.box = document.querySelector(".box")
        this.canvas!.width = this.width
        this.canvas!.height = this.height
        this.ctx = this.canvas?.getContext("2d")
        this.curr = 0
        this.imageIndex = 0;
        this.lis = document.querySelectorAll(".ul li")
        this.load(() => {
            console.log('this.imageSize', this.imageSize)
        })
    }
    getImage(i: number, callback = function () { }) {
        let img: HTMLImageElement = new Image()
        let len: string = i.toString()
        let n: string = ''
        switch (Number(len.length)) {
            case 1:
                n = '0000' + i
                break;
            case 2:
                n = '000' + i
                break;
            case 3:
                n = '00' + i
                break;
        }

        img.src = `https://bucket.zhiyun-tech.com/detail/wbl3/wbl3-detail-animation-1/wbl3-detail-animation-${n}.jpg`

        img.onload = () => {
            this.curr++
            if (this.curr == this.count) {
                callback()
                console.log('width', this.imgArr[0].width, 'height', this.imgArr[0].height)
                this.imageSize = {
                    width: this.imgArr[0].width,
                    height: this.imgArr[0].height
                }
                this.resetSize()
                this.scroll()
                this.drawImage(this.imageIndex)

            }
        }

        this.imgArr.push(img)
    }
    resetSize(){
        this.width = window.innerWidth
        this.height = window.innerHeight
        this.canvas!.width = this.width
        this.canvas!.height = this.height
        let _h = this.width * this.imageSize.height / this.imageSize.width
        this.drawSize = {
            width: this.width,
            height: _h,
            x: 0,
            y: (this.height - _h) / 2
        }
    }
    load(callback = function () { }) {
        for (let i: number = 1; i <= this.count; i++) {
            this.getImage(i, callback)
        }
    }
    drawImage(i: number) {
        this.ctx?.clearRect(0, 0, this.width, this.height)
        this.ctx?.drawImage(this.imgArr[i], 0, 0, this.imageSize.width, this.imageSize.height, 0, this.drawSize.y, this.drawSize.width, this.drawSize.height)
    }
    scroll() {
        this.init()
        window.addEventListener<'scroll'>('scroll', (e) => {
            this.init()
        }, false)
    }
    scrollToShow(min: number, max: number, i: number) {
        if (this.imageIndex >= max || this.imageIndex < min) {
            if (this.lis[i].classList.contains('active')) {
                this.lis[i].classList.remove('active')
            }
        } else if (this.imageIndex < max && this.imageIndex >= min) {
            if (!this.lis[i].classList.contains('active')) {
                this.lis[i].classList.add('active')
            }
        }
    }
    onWindowSize() {
        window.addEventListener<"resize">("resize", () => {
            
            throllte(()=>{
                // console.log("resize")
                this.resetSize()
                this.drawImage(this.imageIndex)
            },100)()
        }, false)
    }

    init() {
        if (window.scrollY - this.prevY) {
            this.imageIndex = parseInt((window.scrollY * this.count / this.clientHeight).toString())
            this.imageIndex > this.count - 1 ? this.imageIndex = this.count - 1 : this.imageIndex
        } else {
            this.imageIndex = parseInt((window.scrollY * this.count / this.clientHeight).toString())
        }

        this.prevY = window.scrollY;

        this.drawImage(this.imageIndex)

        this.scrollToShow(5, 10, 0);
        this.scrollToShow(8, 20, 1);
        this.scrollToShow(15, 25, 2);
        this.scrollToShow(20, 35, 3);
        this.scrollToShow(60, 80, 4);

        this.onWindowSize()
    }
}
let d = new Demo()


